/**
 * @description  交易监控
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC, SecondHeaderC } from '../../../comps';
import style from './index.less';

class showEchartsFour extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'TransactionMonitoringM/getEchartsFour',
      payload: args,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'TransactionMonitoringM/save',
        payload: { getEchartsTwo: { xaxis: [], series: undefined } },
      });
      dispatch({
        type: 'TransactionMonitoringM/getEchartsFour',
        payload: args,
      });
    }
  }

  render() {
    const {
      TransactionMonitoringM: { getEchartsFour },
    } = this.props;
    const xAxis = getEchartsFour.xaxis;
    const series = getEchartsFour.series;
    return (
      <div className={style.body_area}>
        <SecondHeaderC title='交易类型及其金额' />
        <div className='showEcharts4'>
          <XYAxisChartsC
            series={series}
            xAxis={xAxis}
            gridLeft={120}
            toolTipDataFormat={[(value) => value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')]}
            dataZoom={true}
            yAxisUnit={['单位(亿元)']}
            height={363}
            type='barStack'
            barMaxWidth={50}
            // seriesLabelDataFormat={[params=>params.data,params=>params.data,params=>params.data]}
          />
        </div>
      </div>
    );
  }
}
export default connect(({ TransactionMonitoringM }) => ({
  TransactionMonitoringM,
}))(showEchartsFour);
